<template>
  <el-row style="margin: 20px">
    <el-col :span="24">
      <table class="view-table-primary">
        <template>
          <tr v-for="(item, prop) in columns" :key="prop">
            <th :span="4" v-html="item.label"></th>
            <td :span="18">
              <template>
                <general
                  v-if="item.hasOwnProperty('componentName')"
                  disabled
                  v-bind="inheritProps(item)"
                  :component-name="item.componentName"
                ></general>
                <!-- <el-tag v-if="item.component=='tag'" :type="success" v-html="data[prop]">
                                        </el-tag>
                                        <el-switch v-else-if="item.component=='switch'" :value="data[prop]" disabled>
                                        </el-switch> -->
                <span v-else v-html="data[prop]"></span>
              </template>
            </td>
          </tr>
        </template>
      </table>
    </el-col>
  </el-row>
</template>

<script>
export default {
  components: {
    general: () => import("@/components/general/index"),
  },
  data() {
    return {};
  },
  props: {
    columns: {
      type: Object,
      required: true,
    },
    data: Object,
  },
  created() {},
  methods: {
    // 继承转换属性
    inheritProps(template) {
      let cloneTemplate = {};
      Object.assign(cloneTemplate, template);

      let componentName = cloneTemplate.componentName;

      switch (componentName.toKebabCase()) {
        case "button-input":
          cloneTemplate.noText =
            Object.prototype.toString.call(cloneTemplate.noText) ==
            "[object Boolean]"
              ? cloneTemplate.noText
              : true;
          delete cloneTemplate.visible;
          break;
      }

      delete cloneTemplate.componentName;
      delete cloneTemplate.visible;

      return cloneTemplate;
    },
  },
};
</script>
